<template>
  <transition name="fade" appear>
    <div class="invite" v-drag>
      <div class="title">
        <span>邀请好友</span>
        <off-btn @off="off"></off-btn>
      </div>
      <div class="friends_list">
        <ul>
          <li v-for="(item) in result" :key="item.attentionid">
            <div class="user">
              <img :src="item.userinfo.picture" alt="" class="picture">
              <span class="name">{{item.userinfo.name}}</span>
            </div>
            <div class="info">
              <span :style="{color: item.isOnline ? 'green':'gray'}">{{item.isOnline ? '在线' : '离线'}}</span>
              <button v-if="item.isOnline" @click="inviteFriends($event,item.userinfo.username)">邀请</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapActions } from 'vuex'
import offBtn from "../../info/offBtn.vue"
export default {
  name: 'InviteVue',
  data() {
    return {
      result: []
    }
  },
  mounted(){
    this.init()
  },
  methods: {
    // 初始化
    init(){
      this.$api.getAttention().then(res => {
        if(res instanceof Object){
          this.result = res.data
        }else{
          this.showHint({title:res,isFlag:true})
        }
      })
    },
    // 邀请好友
    inviteFriends(e,username){
      let num = 60
      let btn = e.target
      let timer = setInterval(() => {
        btn.disabled = true
        num--
        btn.innerText = num
        if(num == 0){
          clearInterval(timer)
          btn.disabled = false
          btn.innerText = '邀请'
        }
      },1000)
      this.$api.inviteFriends({
        username,
        chatid: this.$parent.RoomInfo.chatid,
      }).then(res => {
        console.log(res)
      })
    },
    // 关闭窗口
    off(){
      this.$parent.invite = false
    },
    ...mapActions(['showHint'])
  },
  components: {
    offBtn
  }
}
</script>

<style scoped>
.invite{
  position: fixed;
  width: 320px;
  background-color: white;
  border: 1px solid gray;
  box-shadow:  0 0 4px gray;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
  overflow: hidden;
}
.invite .title{
  height: 30px;
  background-color: gray;
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  padding: 0 10px;
  font-size: 0.8rem;
  color: white;
}
.friends_list ul{
  width: 337px;
  height: 300px;
  overflow-y: scroll;
}
.friends_list ul li{
  width: 320px;
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 5px;
  border-bottom: 1px solid gray;
}
.friends_list .user,.friends_list .info{
  display: flex;
  align-items: center;
  font-size: 0.8rem;
}
.friends_list .name{
  color: gray;
}
.friends_list .user .picture{
  width: 33px;
}
.friends_list .info button{
  padding: 4px 10px;
  width: 60px;
  background-color: green;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 4px;
  opacity: .7;
  transition: all .3s ease;
}
.friends_list .info button:hover{
  opacity: 1;
}
.friends_list .info button[disabled]{
  background-color: gray;
}
</style>